<template>
  <div class="container">
    <div class="index-head">
      <span class="tip"></span><h5>人事系统</h5>
    </div>
    <div class="pm-part">
      <strong>待办事项</strong>
      <ul>
        <li class="pstion">
          <router-link to="/todoList">
            <img src="./image/waitcon.png">
            <h6>待办事项</h6>
          </router-link>
          <i>{{waitnum}}</i>
        </li>
        <li>
          <router-link to="/doneList">
            <img src="./image/alreadycon.png">
            <h6>已办事项</h6>
          </router-link>
        </li>
        <li>
          <router-link to="/myApplication">
            <img style="width:25px;" src="./image/myaplt.png">
            <h6>我的申请</h6>
          </router-link>

        </li>
      </ul>
    </div>
    <div class="pm-part">
      <strong>人事信息</strong>
      <ul>
        <li>
          <router-link to="/detail">
            <img src="./image/wdxx.png">
            <h6>我的信息</h6>
          </router-link>

        </li>
        <li @click="mySubordinates">
            <img src="./image/wdxs.png">
            <h6>我的下属</h6>
        </li>
        <!-- <li>
          <router-link to="/formal">
            <img src="./image/zzsq.png">
            <h6>转正申请</h6>
          </router-link>
        </li>
        <li>
          <router-link to="/dimission">
            <img src="./image/lzsq.png">
            <h6>离职申请</h6>
          </router-link>
        </li> -->
        <li>
            <img style="width:25px;" src="./image/salary.png">
            <h6>工资单</h6>
        </li>
      </ul>
    </div>
    <div class="pm-part">
      <strong>考勤管理</strong>
      <ul>
        <li>
            <img src="./image/kqrl.png">
            <h6>考勤日历</h6>
        </li>
        <li>
          <img src="./image/xjsq.png">
          <h6>休假申请</h6>
        </li>
        <li>
          <img src="./image/bksq.png">
          <h6>补卡申请</h6>
        </li>
        <!-- <li>
          <img src="./image/ccsq.png">
          <h6>出差申请</h6>
        </li> -->
        <li>
          <img src="./image/wcsq.png">
          <h6>外出申请</h6>
        </li>
        <li>
          <img src="./image/jbsq.png">
          <h6>加班申请</h6>
        </li>
      </ul>
    </div>
    <div class="pm-part">
      <strong>绩效管理</strong>
      <ul>
        <li>
          <img src="./image/jxck.png">
          <h6>绩效结果</h6>
        </li>
        <li>
          <img src="./image/cpck.png">
          <h6>测试结果</h6>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {getTdListNum,getEplid} from '../../api/api'
  export default {
    data() {
      return {
        waitnum: '',
      }
    },
    mounted() {
      this.getWatNum()
      this.getempid()
    },
    methods: {
      mySubordinates(){
        this.$router.push({
          name: 'Subordinates',
          query: {
            emplid: this.$store.state.eid,
          }
        })
      },
      getempid() {
        getEplid().then(res=>{
          if(res && res.retCode === '000000'){
            this.$store.state.eid = res.retData.emplId
            console.log(res.retData)
          }
        })
      },
      getWatNum() {
        getTdListNum().then(res=>{
          if(res && res.retCode === '000000'){
          this.waitnum = res.retData
        }else{
          this.$vux.alert.show({
            title: '',
            content: res.retMsg
          })
        }
      }).catch (res=>{
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .container {
    padding: 20px;
    .index-head {
      text-align: left;
      .tip {
        display: inline-block;
        background-color: #1CAAFE;
        width: 6px;
        height: 18px;
        vertical-align: -4px;
      }
      h5 {
        display: inline-block;
        line-height: 1.8;
        margin-left: 7px;
      }
      .right-bell {
        float: right;
        position: relative;
      }
      .right-bell img {
        position: absolute;
        top: 0px;
        right: 5px;
      }
      .right-bell span {
        position: absolute;
        top: -10px;
        right: -10px;
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        font-size: 12px;
        background: #f00;
        border-radius: 50%;
      }
    }
    .pm-part {
      text-align: left;
      margin-top: 20px;
      .pstion{
        position:relative;
        i{
          position:absolute;
          display:block;
          width:20px;
          height:20px;
          top:7px;
          right:13px;
          background:#ff0000;
          border-radius:50%;
          color:#fff;
          text-align:center;
          line-height:20px;
        }
      }
      strong {
        display: block;
        color: #c7c7c7;
        font-size: 16px;
        font-weight: bold;
      }
      li {
        display: inline-block;
        text-align: center;
        width: 24%;
        font-size: 12px;
        img {
          margin-top: 20px;
          margin-bottom: 10px;
        }
      }
    }
  }
</style>
